<!--  -->
<template>
  <div class="grammar-blank">
    <div class="chose-course-top">
      <div class="header-left">
        <span
          class="back-arrow"
          @click="() => this.$router.push('/reverse')"
        ></span>
      </div>
      <div class="course-title">
        {{ +reverseStatus.level === 0 ? "初中" : "高中" }}语法改错
      </div>
      <div class="btn-group"></div>
    </div>
    <div class="list-wrap" v-if="sentenceInfo.length">
      <blankList :renderData="sentenceInfo" @goStudy="goStudy"></blankList>
    </div>
    <Empty v-else></Empty>
    <Timetips ref="timetips"></Timetips>
  </div>
</template>

<script>
import { grammarBlank } from "@/services/reverse";
import { SUCCESS_CODE } from "@/utils/const";
import blankList from "./blankList";
import Empty from "@/components/Empty";
import Timetips from "@/components/Timetips";
import { mapMutations, mapState } from "vuex";
export default {
  name: "mistake",
  components: {
    blankList,
    Empty,
    Timetips
  },
  data() {
    return {
      sentenceInfo: [],
      printDisabled: false,
    };
  },
  computed: {
    ...mapState({
      reverseStatus: (state) => state.reverseStatus,
    }),
  },
  watch: {},
  methods: {
    ...mapMutations(["setSentenceList"]),
    fetchSentenceList() {
      grammarBlank({
        curr_id: this.reverseStatus.curr_id,
        type: "0",
      }).then((res) => {
        if (res.code === SUCCESS_CODE) {
          this.sentenceInfo = res.data;
        }
      });
    },
    print() {},
    goLastAnswer() {},
    goTest() {},

    goStudy() {},
  },
  created() {
    this.fetchSentenceList();
  },
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {
    this.$refs.timetips.stopTimer();
    this.$refs.timetips.stopEndTimer();
  },
  destroyed() {},
  activated() {},
  beforeRouteLeave(to, from, next) {
    next();
  },
};
</script>
<style lang="less" scoped>
/* @import url(); 引入公共css类 */
.grammar-blank {
  display: flex;
  flex-direction: column;
  height: 100%;
  .list-wrap {
    flex: 1;
    overflow-y: auto;
    padding: 30px 40px;
  }

  .chose-course-top {
    display: flex;
    justify-content: space-between;
    position: relative;
    align-items: center;
    height: 80px;
    padding: 0 40px;
    background-color: #fff;
    .anticon {
      font-size: 24px; /* no */
    }

    .header-left {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      .back-arrow {
        width: 30px;
        height: 27px;
        background-image: url("~assets/home/btn_back.png");
        background-size: 100%;
        cursor: pointer;
      }
    }

    .course-title {
      width: 100%;
      font-size: 20px;
      flex: 1;
      font-weight: 700;

      .check-title {
        color: #c7c7c7;
        padding: 0 15px;
      }
      .check__active {
        color: @primary-color;
        position: relative;
        &::after {
          content: "";
          position: absolute;
          width: 23px;
          height: 4px;
          background-color: @primary-color;
          bottom: -8px;
          left: 50%;
          transform: translateX(-50%);
        }
      }
    }
    .btn-group {
      flex: 1;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      & > a {
        display: inline-block;
        margin-left: 50px;
      }
      .play-text {
        font-weight: 700;
      }
    }
  }
}
</style>
